<template>
    <div class="w-full h-100vh flex-center">
        <div
            class="w-400px box-border p-20px flex flex-col items-center shadow-2xl"
        >
            <div class="font-size-24px">注册状态</div>
            <n-input
                v-model:value="account"
                class="my-20px"
                placeholder="请输入查询账号"
                size="large"
                maxlength="9"
            />
            <div class="w-full flex gap-10px">
                <n-button
                    size="large"
                    class="flex-1"
                    :focusable="false"
                    @click="router.push({ name: 'login' })"
                >
                    返回
                </n-button>
                <n-button
                    type="primary"
                    size="large"
                    class="flex-1"
                    :focusable="false"
                    @click="handleCheckRegister"
                >
                    查询
                </n-button>
            </div>
            <div v-if="result" class="flex-center flex-col mt-20px">
                <div :style="`color: ${statusMap[result.status].color}`">
                    {{ statusMap[result.status].label }}
                </div>
                <div v-if="result.comments" class="w-full">
                    拒绝理由：{{ result.comments }}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

import { checkRegisterStatus } from "@/service/api/modules/user";

const router = useRouter();

const account = ref("");

const result = ref<{ status: number; comments?: string } | null>(null);
const statusMap: { [index: number]: { label: string; color: string } } = {
    0: { label: "被拒绝", color: "#CF3D35" },
    1: { label: "已通过", color: "#36AD6A" },
    2: { label: "待审核", color: "#317FE3" },
};

const handleCheckRegister = async (): Promise<void> => {
    if (account.value === "") {
        window.NMessage.warning("请输入查询账号");
        return;
    }
    if (account.value.length !== 9 || !/^\d+$/.test(account.value)) {
        window.NMessage.warning("请输入正确账号");
        return;
    }
    try {
        const res = await checkRegisterStatus(account.value);
        if (typeof res === "number") {
            result.value = { status: res };
        } else {
            result.value = res;
        }
        console.log(result.value);
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
};
</script>

<style scoped>
* {
    user-select: none;
}
</style>
